<script setup >
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart } from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
} from 'echarts/components';
import VChart from "vue-echarts";

import SingleSelect from './SingleSelect.vue'

import { ref } from "vue";


// Modal
const props = defineProps(['isOpenModal'])
const emit = defineEmits(['closeModal'])

function closeModal() {
    emit('closeModal')
}


// Charts 
use([
    CanvasRenderer,
    PieChart,
    BarChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
]);

const chart1_option = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {},
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Email',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Union Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ads',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        },
    ]
})

const chart2_option = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'horizontal',
        bottom: '20px',
        data: ['直接访问', '联盟广告', '搜索引擎'],
        icon: 'circle'
    },
    series: [
        {
            name: '成绩数据',
            type: 'pie',
            width: '90%',
            // height: '45%',
            left: 'center',
            label: {
                show: false
            },
            data: [
                {
                    value: 335,
                    name: '直接访问'
                },
                {
                    value: 234,
                    name: '联盟广告'
                },
                {
                    value: 1548,
                    name: '搜索引擎'
                }
            ]
        }
    ]
})


const chart3_option = ref({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            width: '90%',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 23,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
        }
    ]
})


// Select options 
const options = [{text: '个人', value: 0}, {text: '团队', value: 1}]
const selected = ref({})

</script>
<template>
    <div class="our-scores-modal" :class="{ open: props.isOpenModal }">
        <div class="content">
            <div class="header">
                <img src="/src/assets/images/student/close.svg" alt="Delete" @click="closeModal" />

            </div>
            <div class="main">
                <div class="mark">
                    <div class="title">
                        <p>团队得分明细</p>
                    </div>
                    <div class="mark-detail">
                        <table>
                            <tr>
                                <th>任务点</th>
                                <th>得分</th>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>98</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>88</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>77</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>66</td>
                            </tr>
                        </table>
                    </div>
                    <div class="title">
                        <p>个人得分明细</p>
                    </div>
                    <div class="mark-detail">
                        <table>
                            <tr>
                                <th>任务点</th>
                                <th>得分</th>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>98</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>88</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>77</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>66</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="view">
                    <div class="title">
                        <p>可视化视图</p>
                        <SingleSelect :options="options" v-model:selected="selected"  :placeholder="'请选择'" class="single-select" />
                    </div>
                    <div class="charts">
                        <div class="chart1">
                            <v-chart :option="chart1_option" />
                        </div>
                        <div class="chart2">
                            <v-chart :option="chart2_option" />
                        </div>
                        <div class="chart3">
                            <v-chart :option="chart3_option" />
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>


</template>
<style scoped >
.our-scores-modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 15;
}

.our-scores-modal.open {
    display: flex;
    justify-content: center;
    align-items: start;
}

.our-scores-modal>.content {
    width: 1057px;
    background-color: #ffffff;
    border: none;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 20px 50px;
    margin-top: 80px;
}

.our-scores-modal>.content>.header {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 30px;
}

.content>.header>img {
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s;
}

.content>.header>img:hover {
    transform: rotate(90deg);
}

.our-scores-modal>.content>.main {
    display: grid;
}

.content>.main>.mark {
    grid-column: 1 / 2;
    padding: 0 20px;
    border-right: #707070 solid 1px;
}

.mark>.title,
.mark>.mark-detail {
    margin-bottom: 20px;
}

.mark>.title>p {
    font-family: Source Han Sans CN;
    font-size: 24px;
    font-weight: bold;
    line-height: 24px;
    color: #707070;
}

.mark>.title>p::after {
    content: ': ';
}

.mark-detail>table {
    width: 100%;
    border-collapse: collapse;
    font-family: Source Han Sans CN;
    font-size: 18px;
    color: #707070;
}

.mark-detail>table th,
.mark-detail>table td {
    text-align: center;
    border: 1px solid #707070;
    padding: 5px 0;
}

.content>.main>.view {
    grid-column: 2 / span 2;
    padding: 0 20px;
}

.view>.title {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.view>.title>p {
    font-family: Source Han Sans CN;
    font-size: 24px;
    font-weight: bold;
    line-height: 24px;
    color: #707070;
}

.view>.title>.single-select {
    width: 248px;
}

.view>.title>p::after {
    content: ": ";
}


.charts {
    display: grid;
    grid-template-areas: "chart1 chart1"
        "chart2 chart3";

}

.charts>.chart1 {
    grid-area: chart1;
    width: 560px;
    height: 280px;
}

.charts>.chart2 {
    grid-area: chart2;
    width: 280px;
    height: 280px;
}

.charts>.chart3 {
    grid-area: chart3;
    width: 280px;
    height: 280px;
}
</style>